<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html,
        body {
            width: 100%;
            background-color: transparent;
        }

        header {
            width: 100%;
            height: 50px;
            position: absolute;
            top: 0px;
            background-color: rgba(255, 255, 255, 0);
        }

        footer {
            width: 100%;
            height: 50px;
            position: absolute;
            bottom: 0px;
            background-color: rgba(255, 255, 255, 0);
        }

        .back {
            width: 32px;
            height: 32px;
            position: absolute;
            bottom: 9px;
            left: 9px;
            background-image: url(../image/vp_back.png);
            background-size: 32px 32px;
            background-position: center;
        }

        .play {
            width: 24px;
            height: 24px;
            position: absolute;
            bottom: 10px;
            left: 5%;
        }

        .playImg {
            background-image: url(../image/vp_play.png);
            background-size: 24px 24px;
            background-position: center;
        }

        .pauseImg {
            background-image: url(../image/vp_pause.png);
            background-size: 24px 24px;
            background-position: center;
        }

        .fullscreen {
            width: 24px;
            height: 24px;
            position: absolute;
            bottom: 9px;
            right: 1%;
        }

        .fullImg {
            background-image: url(../image/video_fullScreen.png);
            background-size: 100% 100%;
            background-position: center;
        }

        .unfullImg {
            background-image: url(../image/video_unfullScreen.png);
            background-size: 100% 100%;
            background-position: center;
        }

        .progress {
            width: 65%;
            position: relative;
            top: 24px;
            margin-left: 15%;
            /*margin: auto;*/
            /*background-color: #fff;*/
        }

        span {
            position: relative;
            top: 10px;
            color: white;
            font-size: 10px;
            margin-left: 82%;
        }

    </style>
    <style>
        .progress_bg {
            height: 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
            background-color: #f2f2f2;
        }

        .progress_bar {
            background: lightskyblue;
            width: 0;
            height: 5px;
            border-radius: 5px;
        }

        .progress_btn {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            position: absolute;
            background: #fff;
            left: 0px;
            margin-left: -10px;
            top: -7px;
            cursor: pointer;
            border: 1px lightskyblue solid;
            box-sizing: border-box;
        }

    </style>
</head>

<body>
<div style="position:fixed;width: 100%;height: 100%;background-color: transparent" onclick="controlShow()"></div>
<header id="header">
    <div onclick="back()" class="back">
    </div>
</header>

<footer id="footer">
    <div id='play' class="play pauseImg" tapmode onclick="fntogglePlay()">
    </div>
    <div id="progress" class="progress">
        <div class="progress_bg">
            <div class="progress_bar"></div>
        </div>
        <div class="progress_btn"></div>
    </div>
    <span id="time">12:30</span>
    <div id='full' class="fullscreen fullImg" tapmode onclick="fntoggleFull()">
    </div>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<!--<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>-->
<script type="text/javascript">
    var playele = $api.byId('play');
    var fullele = $api.byId('full');
    var videoDuration;
    var isTouch;
    apiready = function () {

    };

    function fntogglePlay() {
        if ($api.hasCls(playele, 'playImg')) {
            fnplay();
        } else {
            fnpause();
        }
    }

    function fnplay() {
        api.execScript({
            name: 'player',
            script: 'fnvPlay();'
        });

        $api.removeCls(playele, 'playImg');
        $api.addCls(playele, 'pauseImg');

    }

    function fnpause() {
        api.execScript({
            name: 'player',
            script: 'fnvPause();'
        });

        $api.removeCls(playele, 'pauseImg');
        $api.addCls(playele, 'playImg');
    }

    function fntoggleFull() {
        if ($api.hasCls(fullele, 'fullImg')) {
            fnfull();
        } else {
            fnunfull();
        }
    }

    function fnfull() {
        api.execScript({
            name: 'player',
            script: 'fnvFull();'
        });

        $api.removeCls(fullele, 'fullImg');
        $api.addCls(fullele, 'unfullImg');
    }

    function fnunfull() {
        api.execScript({
            name: 'player',
            script: 'fnvunFull();'
        });

        $api.removeCls(fullele, 'unfullImg');
        $api.addCls(fullele, 'fullImg');
    }

    function fnSeek(seconds) {
        api.execScript({
            name: 'player',
            script: 'seekTo(' + seconds + ');'
        });
    }
    function init(duration) {
        console.log("初始化:"+duration);
        videoDuration=parseInt(duration);
    }
    //进度条
    var doneprogressele = $api.dom('.doneprogress');

    function fnprogressOpen(current, duration) {
        if(isTouch)
            return;
        var left = $("#progress").width() * (current / duration);
        $('.progress_bar').width(left);
        $('.progress_btn').css('left', left);
        $('#time').html(formatTime(current));
    }

    function formatTime(current) {
        var min = parseInt(current / 60) + "";

        var second = parseInt(current % 60) + "";
        return (min.length === 1 ? "0" + min : min) + ":" + (second.length === 1 ? "0" + second : second);
    }
</script>
<script>
    $(function () {
        var ox = 0, left = 0;

        $('.progress_btn').on("touchstart", function (e) {
            isTouch=true;
            ox = e.changedTouches[0].clientX - left;
            console.log(e.changedTouches[0].clientX);
        });
        $('.progress_btn').on("touchend", function (e) {
            isTouch=false;
            var width = $("#progress").width();
            fnSeek(videoDuration*(left/width));
        });
        $('.progress_btn').on("touchmove", function (e) {
            left = e.changedTouches[0].clientX - ox;
            var width = $("#progress").width();
            if (left <= 0) {
                left = 0;
            } else if (left > width) {
                left = width;
            }
            $('.progress_btn').css('left', left);
            $('.progress_bar').width(left);
            console.log(videoDuration+","+left+","+width);
            $('#time').html(formatTime(videoDuration*(left/width)));
        });
    });
    function back() {
        fnunfull();
        api.closeWin();
    }
    var isShow=true;
    function controlShow() {
        isShow=!isShow;
        if(isShow){
            $("#header").css("visibility","visible");
            $("#footer").css("visibility","visible");
        }else {
            $("#header").css("visibility","hidden");
            $("#footer").css("visibility","hidden");
        }
        console.log("hello world");
    }
</script>
</html>